<template>
  <a-col :span="span" :sm="col.sm" :xs="col.xs" :md="col.md" :lg="col.lg">
    <div class="edit-item">
      <div class="edit-item_label" :style="labelStyle">
        <table-ellipsis :tableEllipsisIsTurnLine="labelLineBreak" :text="label" v-if="label"/>
        <slot name="label" v-else/>
      </div>
      <div class="edit-item_content" :style="{'font-size':fontSize}">
        <table-ellipsis :tableEllipsisIsTurnLine="false" :text="content" v-if="content"/>
        <slot v-else/>
      </div>
    </div>
  </a-col>
</template>

<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
export default {
  components: {
    tableEllipsis
  },
  props: {
    label: {
      type: String,
      default: ''
    },
    textAlign: {
      type: String,
      default: 'left',
      validator: (val) => ['left', 'center', 'right'].includes(val)
    },
    labelWidth: {
      type: [Number, String],
      default: 100
    },
    fontSize: {
      type: [String],
      default: '1.4rem'
    },
    maxWidth: {
      type: [Number, String],
      default: 140
    },
    content: {
      type: [String, Number],
      default: ''
    },
    labelLineBreak: {
      type: [Boolean],
      default: false
    },
// :md="12" :lg="6" :xs="24" :sm="24"
    span: {
      type: Number,
      default: undefined
    },
    md: {
      type: Number,
      default: 12
    },
    lg: {
      type: Number,
      default: 6
    },
    xs: {
      type: Number,
      default: 24
    },
    sm: {
      type: Number,
      default: 24
    },
  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
    labelStyle () {
      let width;
      if (!this.labelWidth) {
        width = 'auto';
      }else{
        if (typeof this.labelWidth === 'number') {
          width = `${this.labelWidth}px`;
        }else if (this.labelWidth.indexOf('%') > 0 || this.labelWidth.indexOf("px") > 0 || this.labelWidth.indexOf("calc") > 0) {
          width = this.labelWidth;
        } else {
          width = `${this.labelWidth}px`;
        }
      }
      return {
        width: width,
        'font-size': this.fontSize,
        textAlign: this.textAlign,
        maxWidth: `${this.maxWidth}px`
      }
    },
    col() {
      if (this.span) {
        return {
          span: this.span,
          md: this.span,
          lg: this.span,
          xs: this.span,
          sm: this.span,
        };
      } else {
        return {
          span: this.span,
          md: this.md,
          lg: this.lg,
          xs: this.xs,
          sm: this.sm,
        };
      }
    }
  }
}

</script>

  <style scoped lang="less">
    .edit-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 34px;
      .edit-item_content {
        flex: 1 0 0;
        margin-left:8px;
        white-space: normal;
      }

      & + .edit-item {
        margin-top: 12px;
      }
    }
  </style>
